<template>
  <div class="Manage">
    <Header :zIndex="3" ref="Header"></Header>
    <div class="content-wrap">
      <center>
        <div class="top">
          <ul class="daohang_list">
              <li><router-link class="list_item" :to="{ path: '/Create' }">创建活动</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Manage' }">投票管理</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Level' }">账户升级</router-link></li>
              <li><router-link class="list_item on" :to="{ path: '/Userinfo' }">个人中心</router-link></li>
              <li><router-link class="list_item" :to="{ path: '/Invate' }">推荐有奖</router-link></li>
          </ul>
        </div>
        <div class="info_box">
            <div class="left">
                <div class="grzl">个人中心</div>
                <ul class="nav_child">
                  <li><router-link :to="{ path: '/Userinfo' }">个人信息</router-link></li>
                  <li><router-link :to="{path: '/Account'}">收款信息</router-link></li>
                  <li><router-link :to="{path: '/Address'}">收件地址</router-link></li>
                  <li><router-link :to="{path: '/Invoice'}">发票信息</router-link></li>
                  <li><router-link  class="on" :to="{path: '/InvoiceRecord'}">发票管理</router-link></li>
                  <li><router-link :to="{path: '/DrawList'}">提现记录</router-link></li>
                  <li><router-link :to="{ path: '/Logs' }">消费记录</router-link></li>
                  <li><router-link :to="{ path: '/Editpass' }">修改密码</router-link></li>
                </ul>
            </div>
            <!-- 发票记录组件 -->
            <div class="iinforignt" style="text-align:left;">
                <div style="padding:20px">
                    <el-tabs  v-model="selTab" @tab-click="tabChange">
                        <el-tab-pane name="list" label="开票记录">
                            <el-form :inline="true">
                                <el-form-item label="日期：">
                                    <el-date-picker v-model="dateRang" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                                </el-form-item>
                            </el-form>
                            <el-table :data="records" stripe border class="my_table">
                            <el-table-column label="申请时间" width="140">
                                <template slot-scope="scope">
                                    {{formatDate(scope.row.addtime)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="开票金额" width="110">
                                <template slot-scope="scope">
                                    ￥{{(scope.row.amount/100).toFixed(2)}}元
                                </template>
                            </el-table-column>
                            <el-table-column label="发票介质" width="150">
                                <template slot-scope="scope">
                                    <el-tag size="mini">{{scope.row.material==1 ? '电子发票' : '纸质发票'}}</el-tag>
                                    <el-tag size="mini" style="margin-left:5px;" type="warning">{{scope.row.type==1 ? '普票' : '专票'}}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="发票抬头">
                                <template slot-scope="scope">
                                    <el-popover placement="top-start" width="300" trigger="hover">
                                        <div>
                                            <p>抬头类型：{{scope.row.corpType==1?'个人':(scope.row.corpType==2?'企业':'组织')}}</p>
                                            <p>发票抬头：{{scope.row.corpName}}</p>
                                            <p>纳税人识别号：{{scope.row.taxpayerId}}</p>
                                            <p>开户银行：{{scope.row.bankName}}</p>
                                            <p>银行账号：{{scope.row.bankNo}}</p>
                                            <p>企业地址：{{scope.row.address}}</p>
                                            <p>企业电话：{{scope.row.corpTel}}</p>
                                        </div>
                                        <div slot="reference">{{scope.row.corpName}}  <i class="el-icon-info"></i></div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="收件人">
                                <template slot-scope="scope">
                                    <el-popover placement="top-start" width="300" trigger="hover">
                                        <p>收件人：{{scope.row.recvName}}</p>
                                        <p>联系电话：{{scope.row.recvPhone}}</p>
                                        <p>收件地址：{{scope.row.recvAddr}}</p>
                                        <div slot="reference">{{scope.row.recvName}} <i class="el-icon-info"></i></div>
                                    </el-popover>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态" width="120" align="center">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.state==0" effect="dark" type="info">审核中</el-tag>
                                    <el-tag v-if="scope.row.state==1" effect="dark" type="success">已开票</el-tag>
                                    <el-tag v-if="scope.row.state>1" effect="dark" type="danger">审核未通过</el-tag>
                                    <p style="font-size:12px" v-if="scope.row.state>1">{{scope.row.reason}}</p>
                                    <el-link type="primary" target="_blank" style="font-size:12px" :href="scope.row.invoiceUrl" v-if="scope.row.state==1 && scope.row.material==1">下载电子发票</el-link>
                                </template>
                            </el-table-column>
                            </el-table>
                            <el-pagination :page-size="pageSize" :pager-count="11" layout="prev, pager, next" 
                                @current-change="setPage" :total="recordCount">
                            </el-pagination>
                        </el-tab-pane>
                        <el-tab-pane name="req" label="申请开票">
                            <div class="step_bg">
                                <el-steps align-center>
                                    <el-step status="process" title="选择消费记录"></el-step>
                                    <el-step status="process" title="申请开票"></el-step>
                                    <el-step status="process" title="财务处理开票"></el-step>
                                    <el-step status="process" title="发票下载/邮寄"></el-step>
                                </el-steps>
                            </div>
                            <el-card>
                                可开票金额：<span class="color_ly size_big">{{totalYuan}}</span><span class="color_ly size_small">{{totalFen}}</span> 元
                            </el-card>
                            <el-table style="margin-top:20px;font-size:14px"
                                 @selection-change="handleSelect"
                                 border stripe :data="payRecords">
                                <el-table-column
                                    type="selection"
                                    width="35">
                                    </el-table-column>
                              <el-table-column label="日期" width="180">
                                <template slot-scope="scope">
                                    <span>{{formatDate(scope.row.paytime)}}</span>
                                </template>
                              </el-table-column>
                               <el-table-column
                                label="摘要"
                                align="center">
                                <template slot-scope="scope">
                                <span>升级{{levelName[scope.row.level]}}</span>
                                </template>
                                </el-table-column>
                                <el-table-column align="center" label="充值金额" width="160">
                                    <template slot-scope="scope">
                                        <span>￥{{(scope.row.amount / 100).toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="可开票金额" width="160">
                                    <template slot-scope="scope">
                                        <span>￥{{(scope.row.amount / 100).toFixed(2)}}</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <el-pagination style="margin-top:10px" :page-size="pageSize" :pager-count="11" layout="prev, pager, next" 
                                @current-change="setPayPage" :total="payRecordCount">
                            </el-pagination>
                            <div class="btminfo">
                                <p>
                                    待开票金额 <span class="color_ly size_small">{{(amount / 100).toFixed(2)}}</span>元
                                </p>
                                <el-button type="primary" :disabled="amount<1" @click="invoiceReq">申请开票</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
            <div class="clear"></div>
        </div>
      </center>
      <el-dialog :visible.sync="showDlg" width="70%" title="确认开票信息" :close-on-click-modal="false" :close-on-press-escape="false">
          <h3 class="htitle">请确认发票抬头</h3>
          <el-table border stripe :data="invoiceData">
            <el-table-column label="发票抬头">
                <template slot-scope="scope">
                    <p>{{scope.row.corpName}}</p>
                    <el-tag type="warning" size="mini" v-if="scope.row.type==2">专票</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="发票类型" width="140">
                <template slot-scope="scope">
                    {{scope.row.type==1?'增值税普通发票':'企业增值税专用发票'}}
                </template>
            </el-table-column>
            <el-table-column label="纳税人识别号" width="160" prop="taxpayerId">
            </el-table-column>
            <el-table-column label="基本开户银行" prop="bankName">
            </el-table-column>
            <el-table-column label="基本开户账号" prop="bankNo">
            </el-table-column>
            <el-table-column label="企业注册地址" prop="address"></el-table-column>
            <el-table-column label="企业注册电话" prop="corpTel" width="140"></el-table-column>
          </el-table>
          <h3 class="htitle">请选择发票介质</h3>
          <el-radio-group v-model="invoiceReqObj.material">
            <el-radio :label="1" :disabled="invoicetype==2">
                电子发票（开票快） 
                <el-tooltip content="企业增值税专用发票不支持开具电子发票，请申请纸质发票" placement="top">
                    <i class="el-icon-info"></i>
                </el-tooltip>
            </el-radio>
            <el-radio :label="2">纸质发票</el-radio>
          </el-radio-group>
          <h3 class="htitle">请选择邮寄地址</h3>
          <el-table :data="recvAddrs" border>
            <el-table-column label="收件人" width="180">
                <template slot-scope="scope">
                    <el-radio v-model="invoiceReqObj.address" :label="scope.row.id">
                        {{scope.row.recvName}}
                    </el-radio>
                </template>
            </el-table-column>
            <el-table-column label="联系电话" prop="recvPhone" width="150"></el-table-column>
            <el-table-column label="收件地址" prop="recvAddr"></el-table-column>
          </el-table>
          <h3 class="htitle">请填写发票备注（选填）</h3>
          <el-input type="textarea" row="5" v-model="invoiceReqObj.content" placeholder="填写后打印在发票备注内容区域" style="width:50%" maxlength="200"></el-input>
          <div class="note">发票备注不可超过 230 个字节，一个中文字符为 2 个字节</div>
          <div slot="footer">
              <div class="footer">
                  <div>
                      待开票金额 <span class="color_ly size_small">{{(amount/100).toFixed(2)}} 元</span>
                  </div>
                  <div>
                      <el-button @click="showDlg=false" style="width:100px;margin-right:20px;">取消</el-button>
                      <el-button type="primary" style="width:100px" @click="submitReq">提交</el-button>
                  </div>
              </div>
          </div>
      </el-dialog>
    </div>
    <Footer></Footer>
  </div>
</template>


<script>
import User from '../../utils/user'
import Footer from '../components/Footer.vue'
import Header from '../components/Header.vue'
import Ajax from '../../utils/ajax'
export default {
  name: 'InvoiceRecord',
  components: {
    Header,
    Footer
  },
  data () {
    return {
        records:[],
        payRecords:[],
        invoiceData:[],
        invoicetype:1,
        page: 1,
        pageSize: 20,
        recordCount:0,
        dateRang:[],
        start: 0,
        end: 0,
        selTab: 'list',
        payRecordCount: 0,
        totalYuan: "0",
        totalFen: ".00",
        amount: 0,
        showDlg: false,
        recvAddrs:[],
        invoiceReqObj:{
            material: 1,
            records:[],
            address: 0,
            content: ''
        }
    }
  },
  created () {
    if(!User.getToken() || !User.getInfo()) {
      this.$router.replace('/Login');
      return;
    }
    
    this.tabChange();
    this.loadInvoice();
    this.loadRecvAddrs();
  },
  methods: {
      tabChange(){
          this.page = 1;
          if(this.selTab == 'list') {
              this.setTitle('开票记录_发票管理');
              this.loadData();
          } else {
              this.setTitle('申请开票_发票管理');
              this.loadPayRecords();
          }
      },
      loadRecvAddrs(){
        Ajax.get('member/address').then(res=>{
            if(res.code == 0){
                this.recvAddrs = res.data;
            }
        }).catch(err=>{
            console.error(err);
        })
      },
      loadInvoice(){
        Ajax.get('member/invoice').then(res=>{
            if(res.code == 0){
                this.invoiceData = [];
                this.invoiceData.push(res.data);
                this.invoicetype = res.data.type;
                if(this.invoicetype == 2) {
                    this.invoiceReqObj.material = 2;
                }
            }
        }).catch(err=>{
            console.error(err);
        })
      },
      setPayPage(n){
          this.page = n;
          this.loadPayRecords();
      },
      setPage(n){
        this.page = n;
        this.loadData();
      },
      search(){
          this.page = 1;
          if(this.dateRang && this.dateRang.length == 2) {
              if(this.dateRang[0] instanceof Date) {
                  this.start = parseInt(this.dateRang[0].getTime() / 1000);
              }
              if(this.dateRang[1] instanceof Date) {
                  this.end = parseInt(this.dateRang[1].getTime() / 1000);
              }
          }
          this.loadData();
      },
      loadData(){
          Ajax.get('member/invoice/record', {
              page: this.page,
              size: this.pageSize,
              start: this.start,
              end: this.end
          }).then(res=>{
              if(res.code == 0){
                  this.records = res.data.data;
                  this.recordCount = res.data.recordCount;
              } else {
                  this.$alert(res.msg);
              }
          }).catch(err=>{
              console.error(err);
              this.$alert('获取数据失败');
          });
      },
      loadPayRecords(){
          Ajax.get('member/payrecord', {
                page: this.page,
                size: this.pageSize,
                state: 1
            }).then(res=>{
                if(res.code == 0){
                    this.payRecords = res.data.data;
                    this.payRecordCount = res.data.recordCount;
                    var f = (res.data.invoiceAmount / 100).toFixed(2);
                    var n = f.indexOf(".");
                    this.totalYuan = f.substring(0, n);
                    this.totalFen = f.substring(n);
                } else {
                    this.$alert(res.msg);
                }
            }).catch(err=>{
                console.error(err);
                this.$alert('获取消息记录失败');
            })
      },
      invoiceReq(){
          this.showDlg = true;
      },
      handleSelect(ary){
        this.invoiceReqObj.records = [];
        const that = this;
        this.amount = 0;
        ary.forEach((val, idx, a) => {
            this.invoiceReqObj.records.push(val.id);
            that.amount += val.amount;
        });
      },
      submitReq(){
          if(!this.invoiceReqObj.records || this.invoiceReqObj.records.length == 0){
              this.$alert('请选择要开票的消费记录');
              return;
          }
          if(!this.invoiceReqObj.address) {
              this.$alert('请选择收件地址');
              return;
          }
          this.showDlg = false;
          Ajax.post('member/request/invoice', this.invoiceReqObj).then(res=>{
              if(res.code == 0){
                  this.$alert('提交成功');
                  this.selTab = 'list';
                  this.tabChange();
              } else {
                  this.$alert(res.msg);
              }
          }).catch(err=>{   
              console.error(err);
              this.$alert('提交失败，网络错误');
          });
      }
  }
}
</script>
<style scope>
.my_table .el-table__cell {
    vertical-align: top !important;
}
.step_bg {
    padding: 25px 0;
    background-color:#fafafa;
    margin-bottom:20px;
}
.size_big{
    font-size:24px;
}
.size_small {
    font-size:16px;
}
.btminfo {
    margin-top:20px;
    border-top:1px solid #f0f0f0;
    padding:20px 0;
    font-size:12px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
.htitle:nth-child(1){
    margin-top:0 !important;
}
.htitle {
    margin-top:25px;
    margin-bottom:15px;
    color:#000;
    line-height: 2rem;
}
.note {
    color:#999;
    font-size:12px;
    line-height: 2rem;
}
.el-radio__label {
    font-size:12px !important;
}
.footer {
    height:50px;
    border-top:1px solid #f0f0f0;
    font-size:12px;
    padding-top:15px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
</style>
<style src="@/assets/css/manage.css"  scoped></style>
<style src="@/assets/css/userinfo.css"  scoped></style>
